<template>
	<view>
		<u-gap height="100" bg-color="#fff"></u-gap>
		<u-cell-group :border='false'>
			<u-cell-item v-if='login==0' :title="userInfo&&userInfo.name?userInfo.name:'点击登录'" 
				:border-bottom='false' @click="goPage('/pages/login/login','login')">
				<u-image slot="icon" width="120rpx" height="120rpx" class='u-m-r-20' border-radius='8'
					src="/static/logo.png"></u-image>
			</u-cell-item>
			<u-cell-item v-else :title="userInfo&&userInfo.name?userInfo.name:'请完善信息'" :label='"账号:"+userInfo.mobile'
				:border-bottom='false' @click="goPage('/pages/mine/information/information')">
				<u-image slot="icon" width="120rpx" height="120rpx" class='u-m-r-20' border-radius='8'
					:src="photo"></u-image>
			</u-cell-item>
			<view class="u-p-30 u-flex u-row-between">
				<w-mine-menu @click="goPage('/pages/mine/home/home','home')"></w-mine-menu>
				<w-mine-menu title='我的报修' subTitle="故障报修申请" icon='/static/indevIcon2.png'
					@click="goPage('/pages/mine/repair/repair')"></w-mine-menu>
			</view>
			<view class="u-p-l-30 u-m-t-20">
				<u-section title="我的操作" font-size='36' :right="false" :show-line='false'></u-section>
			</view>
			<u-cell-item icon="error-circle" :icon-style="{color:'#d10e00'}" icon-size='40' title="投诉建议"
				@click="goPage('/pages/mine/complaint/complaint')"></u-cell-item>
			<u-cell-item icon="rmb-circle" :icon-style="{color:'#59b9e3'}" icon-size='40' title="缴费提醒"
				@click="goPage('/pages/mine/pay/pay')"></u-cell-item>
			<u-cell-item icon="account" :icon-style="{color:'#ed7129'}" icon-size='40' title="实名认证"
				@click="goPage('/pages/mine/certification/certification','certification')"></u-cell-item>
			<u-cell-item icon="order" :icon-style="{color:'#038fd9'}" icon-size='40' title="账单"
				@click="goPage('/pages/mine/bill/bill')"></u-cell-item>
			<u-gap height="20" bg-color="#f1f1f1" v-if='login'></u-gap>
			<u-cell-item icon="play-left" v-if='login' :icon-style="{color:'#54e4a9'}" icon-size='40' title="退出" @click="out">
			</u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import { getByMobile } from '@/api/index.js'
	import {
		$imgUrl
	} from '@/service/request.js'
	export default {
		computed: {
			...mapState(['userInfo','login']),
			photo() {
				return $imgUrl + this.userInfo.photo
			},
		},
		data() {
			return {

			}
		},
		onShow() {
			if(this.userInfo && this.userInfo.mobile){
				getByMobile({
					mobile: this.userInfo.mobile
				}).then(res => {
					this.$store.commit('setUserInfo', res)
				})
			}
		},
		methods: {
			out() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorage()
							this.$store.commit('setUserInfo', {})
							this.$store.commit('setLogin', 0)
							this.$store.commit('setAddress',{})
							uni.clearStorageSync()
							this.$u.route({
								type:'tab',
								url:'/pages/index/index'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goPage(path, type) {
				if(type=='login'){
					this.$u.route('/pages/login/login')
					return
				}
				if(this.login==0){
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								this.$u.route('/pages/login/login')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				if(type=='certification' && this.userInfo.idno){
					uni.showModal({
						title: '提示',
						content: '已完成实名，是否需要更新？',
						success: (res) => {
							if (res.confirm) {
								this.$u.route(path);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				this.$u.route(path);
				// uni.showModal({
				// 	title: '提示',
				// 	content: '请完善信息',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			this.goPage('/pages/mine/information/information')
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });
			}
		}
	}
</script>

<style scoped>

</style>
